<template>
    <!-- 头部 -->
    <div class="header-warp">
        <div class="header clearFix">
            <div class="header-left">
                <a class="logo clearFix" title="大众点评网">
                    <img src="@/assets/images/logo.jpg" alt="logo">
                    <span @click="goHome">
                        大众点评
                    </span>
                </a>
            </div>

            <div class="header-right">
                <ul class="clearFix">
                    <li class="xlk">
                        <a>
                            {{userName}} 用户
                        </a>
                    </li>
                    <li class="fgx"></li>
                    <li class="xlk">
                        <router-link to="/message">
                            消息
                        </router-link>
                    </li>
                    <li class="fgx"></li>
                    <li class="nav xlk">
                        <router-link to="/personalCenter">
                            个人中心
                            <i class="iconfont icon-xiangxia1"></i>
                        </router-link>
                        <div class="box">
                            <ul>
                                <li>我的评价</li>
                                <li>我的收藏</li>
                                <li>我的评价</li>
                            </ul>
                        </div>
                    </li>
                    <li class="fgx"></li>
                    <li  class="nav xlk">
                        <a>
                            商户服务
                            <i class="iconfont icon-xiangxia1"></i>
                        </a>
                        <div class="box">
                            <ul>
                                <li>商户中心</li>
                                <li>商户合作</li>
                                <li>招募餐饮代理</li>
                                <li>招募非餐饮代理</li>
                            </ul>
                        </div>
                    </li>
                    <li class="fgx"></li>
                    <li class="xlk">
                        <a>
                            帮助中心
                            <i class="iconfont icon-xiangxia1"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'header_black',

        methods:{
            //跳转回主页
            goHome(){
                this.$router.push('/home')
            }
        },

        computed:{
            //用户名
            userName(){
                return JSON.parse(localStorage.getItem("isLogin"))
            }
        }
    }
</script>

<style lang="css" scoped>
/* 头部样式 */
.header-warp{
    height: 45px;
    background-color: #313131;
}
.header-warp .header{
    width: 960px;
    margin: 0 auto;
}
.header-warp .header .header-left{
    float: left;
}
.header-warp .header .header-left .logo{
    display: block;
}
.header-warp .header .header-left .logo span{
    float: right;
    height:45px;
    line-height:40px;
    color: #fff;
    font-size: 18px;
    margin-left: 5px;
}
.header-warp .header .header-left .logo img{
    width: 36px;
    height: 34px;
    border-radius: 10px;
    margin-top: 5px;
    float: left;
}
.header-warp .header .header-right{
    float: right;
}
.header-warp .header .header-right ul .nav .box{
    background: #fff;
	position: absolute;
	width: 94px;
	display: none;
    padding: 0 10px;
}
.header-warp .header .header-right ul .nav .box ul li:hover{
    color: #F65D29;
    font-weight: bold;
}
.header-warp .header .header-right ul .nav:hover .box{
    display: block;
}
.header-warp .header .header-right ul li{
    float: left;
    line-height:45px;
}
.header-warp .header .header-right ul .xlk :hover a{
    color: #F65D29;
}
.header-warp .header .header-right ul li a{
    color: #999999;
    display: block;
    margin: 0 15px;
}
.header-warp .header .header-right .fgx{
    background-color: #b3aeae;
    width: 2px;
    height: 16px;
    margin: 15px 11px 0 13px;
}
.header-warp .header .header-right .register{
    color: #F65D29;
}
</style>